<template>
	<!-- 外层包装 -->
	<view class="index-all-wrap">
		<!-- 下拉框和搜索框 -->
		<view class="jq22-navBar jq22-navBar-fixed" >
			<!-- <view class="jq22-navBar-item" @click="checkGrade"> -->
			<view class="jq22-navBar-item">
				<!-- <text>{{currentGradeClass}}<text class="iconfont icon-show_more" ></text></text> -->
				<text>医摩尔<text class="iconfont icon-show_more" ></text></text>
			</view>
			<view class="jq22-center">
				<view class="jq22-search-box" @click="search">
					<view class="icon icon-search"></view>
					 <view class="search">搜索专家名称</view>
				</view>
			</view>
		</view>

		<!-- 轮播图 -->
		<view class="index-banner-wrap">
			<div class="jq22-five-box"></div>
			<div class="m-slider" data-ydui-slider>
				<swiper class="index-banner swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
			 :duration="duration" circular>
					<swiper-item @click="bannerTo(item)" v-for="(item, index) in bannerList" :key="item.id">
						<image class="index-banner-img" :src="item.image" mode="aspectFill"></image>
					</swiper-item>
				</swiper>
			</div> 
		</view>
		
		<!-- 新闻资讯 -->
		<!-- <view @click="openNews" class="news-wrap"> -->
		<view class="news-wrap">
			<image class="news-wrap-title-img" src="http://qiniu.52teamwork.com/news_he.png" mode="aspectFit"></image>
			<text class="news-shu">|</text>
			<swiper class="swiper-wrap" :vertical="true" :autoplay="true" :interval="3000" :duration="1000" circular>
				<swiper-item  v-for="(item, index) in news" :key="index" class="swiper-item">
					<text class="news-title">{{item.name}}</text>
				</swiper-item>
			</swiper>
			<text class="news-arow iconfont icon-jinrujiantou"></text>
		</view>
		
		<!-- 课程选项卡 -->
		<view class="index-course-wrap">
			<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="120">
				<view @click="getCourseByClass(item.id, item.name)" class="course-item scroll-view-item_H" v-for="(item, index) in course_class"
				 :key="item.id">
					<image :src="item.thumb" mode="aspectFit"></image>
					<text>{{item.name}}</text>
				</view>
			</scroll-view>
		</view>
		
		<!-- 新闻和讲师按钮 -->
		<!-- <view  class="news-teacher-wrap">
			<image @click="openTeacher" class="news-teacher-img1" src="../../static/images/teachericon.png" mode="aspectFit"></image>
			<image @click="openNews" class="news-teacher-img2" src="../../static/images/newsicon.png" mode="aspectFit"></image>
		</view> -->

		<view class="course-list-wrap">
			<view class="la-wrap">
				<view class="live-title-wrap">
					<!-- 标题 更多 -->
					<text class="live-title">推荐专家</text>
					<text @click="contentmore" class="content-more">更多&nbsp;<text class="iconfont icon-jinrujiantou c-more-icon"></text></text>
				</view>
			</view>
			<view class="course-wrap">
				<view @click="viewExpertInfo(item.id)" class="live-list" v-for="(item, index) in expertList" :key="index">
					<view class="live-list-img-wrap">
						<image class="live-list-img" :src="item.thumb" mode="aspectFill"></image>
						<!-- <text class="course-title-icon">内容</text> -->
					</view>
					<view class="live-list-info">
						<view class="live-c-title">{{item.name}}</view>
						<view class="live-c-title">{{item.hospital}}</view>
						<!-- <view class="live-status-tuwen">
							{{item.hospital}}
						</view> -->
						<view class="live-teacher-price">
							<image class="live-teacher-avatar" :src="item.avatar" mode="aspectFill"></image>
							<text class="teacher-name">{{item.user_nickname}}</text>
							<view class="price-wrap">
								<text v-if="item.paytype == 0" class="free">免费</text>
								<text v-if="item.paytype == 2" class="pass">密码</text>
								<text v-if="item.paytype ==1" class="numPrice">
									{{'¥' + item.payval}}
								</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 课程列表区 -->
		<view class="course-list-wrap">
			<!-- 直播课堂 -->
			<view class="course-list-wrap">
				<view class="live-title-wrap">
					<text class="live-title">会议预告</text>
					<text @click="livemore" class="live-more">
						更多
						<text class="iconfont icon-jinrujiantou c-more-icon"></text>
					</text>
				</view>
				
				<!-- 直播课列表 -->
				<view class="course-wrap">
					<view class="live-list" v-for="(item, index) in list_info" :key="index">
						<view class="live-list-img-wrap">
							<image class="live-list-img" :src="item.thumb" mode="aspectFill"></image>
							<text class="course-title-icon">预告</text>
						</view>
						<view class="live-list-info">
							<view class="live-c-title">{{item.name}}</view>
							<view class="live-status living-status" v-if="item.islive == 1">
								{{item.lesson}}
							</view>
							<view class="live-status" v-else>
								{{item.lesson}}
							</view>
							<view class="live-teacher-price">
								<image class="live-teacher-avatar" :src="item.avatar" mode="aspectFill"></image>
								<text class="teacher-name">{{item.user_nickname}}</text>
								<view class="price-wrap">
									<text v-if="item.paytype == 0" class="free">免费</text>
									<text v-else-if="item.paytype == 2" class="pass">密码</text>
									<text v-else-if="item.paytype ==1" class="numPrice">
										{{'¥' + item.payval}}
									</text>
								</view>
							</view>
						</view>
					</view>
					<view class="listline"></view>
				</view>
			</view>
		</view>
		
		<!-- 广告 -->
		<!-- <view @click="guanggao" class="index-banner-wrap2">
			<image class="index-banner-img2"  src="https://edu-qiniu.sdwanyue.com/admin/20220927/e58ba42a249ade7101484f9cc989d311.png" mode="aspectFill"></image>
		</view> -->
		
		<!-- 精选内容 -->
		<view class="course-list-wrap">
			<view class="la-wrap">
				<view class="live-title-wrap">
					<!-- 标题 更多 -->
					<text class="live-title">会议回放</text>
					<text @click="livemore" class="content-more">更多&nbsp;<text class="iconfont icon-jinrujiantou c-more-icon"></text></text>
				</view>
			</view>
			<view class="course-wrap">
				<view @click="viewContentInfo(item.id,item.paytype)" class="live-list" v-for="(item, index) in list_info" :key="index">
					<view class="live-list-img-wrap">
						<image class="live-list-img" :src="item.thumb" mode="aspectFill"></image>
						<text class="course-title-icon">回放</text>
					</view>
					<view class="live-list-info">
						<view class="live-c-title">{{item.name}}</view>
						<view class="live-status-tuwen">
							{{item.lesson}}
						</view>
						<view class="live-teacher-price">
							<image class="live-teacher-avatar" :src="item.avatar" mode="aspectFill"></image>
							<text class="teacher-name">{{item.user_nickname}}</text>
							<view class="price-wrap">
								<text v-if="item.paytype == 0" class="free">免费</text>
								<text v-if="item.paytype == 2" class="pass">密码</text>
								<text v-if="item.paytype ==1" class="numPrice">
									{{'¥' + item.payval}}
								</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view>
			<video src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4" autoplay="true"></video>
		</view>
	</view>
</template>

<script>
	// 引入模板
	import swiperTabHead from "@/components/common/swiper-tab-head.vue";
	import loadMore from '@/components/common/load-more.vue';
	import uniPopup from '@/components/uni-ui/uni-popup/uni-popup.vue';
	import uniNavBar from '@/components/uni-ui/uni-nav-bar/uni-nav-bar.vue';

	const app = getApp();

	export default {
		components: {
			swiperTabHead,
			loadMore,
			uniPopup,
			uniNavBar
		},
		data() {
			return {
				news: [{'name': "这里可以当做一个入口"}],
				//顶部选项卡
				tabIndex: 0,
				swiperheight: 0, //高度
				// 轮播图数据
				bannerList: {},
				background: ['color1', 'color2', 'color3'],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				live_demo: [],
				currentGradeClass: "",
				currentGradeClassId: "",
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				course_class: {},
				packs: {},
				course: {},
				live_info: {}, //直播课堂列表
				list_info: {}, //内容列表
				expertList: {},
				nums: '',
			}
		},
		// 监听导航按钮点击事件
		onNavigationBarButtonTap() {
			this.navigateTo({
				url: '../add-input/add-input'
			})
		},
		onShow: function() {
			// this.getClassGrade();
			this.getIndex();
		},
		onReady() {

		},
		onShareTimeline: function(res) {},
		onShareAppMessage: function(res) {},
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					let height = res.windowHeight - uni.upx2px(100);
					this.swiperheight = height;
				}
			})
			this.getNews();
		},
		methods: {
			getClassGrade(){
				let that = this;
				if(app.globalData.grade_class.name == '' || app.globalData.grade_class.id == '') {
					uni.request({
						url: app.globalData.site_url + "Course.GetGrade",
						data: {},
						success:(res)=> {
							let data = res.data.data;
							if(parseInt(data.code) !== 0) {
								return;
							}
							//获取首页内容
							that.getData(data.info[0].list[0].id);
							app.globalData.grade_class.name = data.info[0].list[0].name;
							app.globalData.grade_class.id = data.info[0].list[0].id;
							that.currentGradeClass = data.info[0].list[0].name;
							that.currentGradeClassId = data.info[0].list[0].id;
							that.getIndex();
						}
					});

				} else {

					that.currentGradeClass = app.globalData.grade_class.name;
					that.currentGradeClassId = app.globalData.grade_class.id;
					//获取首页内容
					that.getData(that.currentGradeClassId);
					that.getIndex();
				}

			},
			focus() {
				this.checktoken((successFun) => {
					if (successFun != 0) {
						return;
					}
				});
			},
			// getNews() {
			// 	let that = this;
			// 	let gData = app.globalData;
			// 	uni.request({
			// 		url: gData.site_url + 'api/syem/index',
			// 		method: 'POST',
			// 		data: {},
			// 		success: res => {
			// 			let data = res.data.data;
			// 			if(data.code == 0 && data.info.length > 0) {
			// 				that.news = res.data.data.info;
			// 			}
			// 		},
			// 		fail: () => {
			// 			uni.showToast({
			// 				icon: 'none',
			// 				title: '网络错误',
			// 			});
			// 			return;
			// 		},
			// 	});

			// },
			openNews() {
				uni.navigateTo({
					url: '../news/news',
				});
			},
			openTeacher() {
				uni.navigateTo({
					url: '../teacherlist/teacherlist',
				});
			},			
			// 根据分类查看课程列表
			getCourseByClass(courseCid, courseCname) {
				uni.navigateTo({
					url: '../course_class_list/course_class_list?course_cid=' + courseCid + '&course_cname=' + courseCname,
					fail: () => {
						uni.showToast({
							icon: 'none',
							title: '网络错误'
						});
					},
				});
			},
			//获取数据
			getData(grade_class_id) {
				//获取分类
				uni.request({
					url: app.globalData.site_url + 'Home.GetIndex',
					data: {
						'gradeid': grade_class_id
					},
					success: (res) => {
						//live是直播, list是内容
						let data = res.data.data;
						// this.course_class = data.info[0].courseclass;
						if (parseInt(res.data.data.code) !== 0) {
							return;
						}
						console.log(data.info[0].silide);
						//填充banner和分类图标
						// this.bannerList = data.info[0].silide;
						//填充直播和内容
						this.live_info = data.info[0].live;
						// this.list_info = data.info[0].list;
						this.packs = data.info[0].packs;
						this.course = data.info[0].course;
					}
				});

			},
			//首页数据
			getIndex() {
				uni.request({
					url: app.globalData.site_url + "api/syem/index",
					method:"POST",
					success: (res) => {
						let data = res.data.data;
						this.bannerList = data.bannerList;
						this.course_class = data.newsList;
						this.expertList = data.expertList;
						this.list_info = data.meetingList;
					}
				});
			
			},
			//点击切换导航
			tabtap(index) {
				this.tabIndex = index;
			},
			tabChange(e) {
				this.tabIndex = e.detail.current;
			},
			//官方滚动方法
			scroll: function(e) {
				this.old.scrollTop = e.detail.scrollTop;
			},
			goTop: function(e) {
				this.scrollTop = this.old.scrollTop;
				this.$nextTick(function() {
					this.scrollTop = 0;
				});
				uni.showToast({
					icon: "none",
					title: "纵向滚动 scrollTop 值已被修改为 0"
				})
			},
			bannerTo(item) {
				//此方法只能在真机端运行
				uni.navigateTo({
					url: '../about/banner?url=' + encodeURIComponent(JSON.stringify(item.url)) + '&title=' + item.title,
				});
			},
			checkGrade() {
				uni.navigateTo({
					url: "../check_class/check_class",
				});
			},
			checktoken(successFun) {
				if (app.globalData.userinfo.token == undefined || app.globalData.userinfo == '') {
					successFun(0);
				} else {
					uni.request({
						url: app.globalData.site_url + 'User.Iftoken',
						method: 'POST',
						data: {
							'uid': app.globalData.userinfo.id,
							'token': app.globalData.userinfo.token
						},
						success: res => {
							if (res.data.data.code == 700) {
								uni.showModal({
									title: res.data.data.msg,
									content: '',
									showCancel: true,
									cancelText: '取消',
									confirmText: '去登录',
									confirmColor: '#38DAA6',
									success: res => {
										if (res.confirm) {
											uni.navigateTo({
												url: '../login/login',
												success: res => {},
												fail: () => {},
											});
										}
									},
									fail: () => {

									},
								});
							}
							successFun(res.data.data.code);
						},

					});
				}
			},
			search() {
				uni.navigateTo({
					url: "../search/search"
				})
			},
			// 查看大班课(语音、PPT、视频直播)内容详情
			viewLiveInfo(liveCourseId, liveCoursetype) {
				this.checktoken((successFun) => {
					if (successFun != '0') {
						return;
					} else {
						uni.navigateTo({
							url: '../../packageB/pages/video/video?courseid=' + liveCourseId + '&paytype=' +liveCoursetype,
						});
					}

				});

			},
			viewContentInfo(contentCourseId, contentCoursetype) {
				this.checktoken((successFun) => {
					if (successFun != 0) {
						return;
					} else {
						uni.navigateTo({
							url: '../../packageB/pages/content-info/content-info?courseid=' + contentCourseId + '&paytype=' +
								contentCoursetype,
						});
					}
				});
			},
			viewExpertInfo(id) {
				this.checktoken((successFun) => {
					if (successFun != 0) {
						return;
					} else {
						uni.navigateTo({
							url: '../teacherinfo/teacherinfo?id=' + id,
						});
					}
				});
			},
			// 更多大班课
			livemore() {
				uni.switchTab({
					url: '../all-more/all-more',
				});
			},
			guanggao() {
				uni.navigateTo({
					url: '../news/news',
				});
			},
			// 更多内容
			contentmore() {
				uni.switchTab({
					url: '../expert/all-more',
				});
			},

		}
	}
</script>

<style>
	@import url("/static/css/index.css");
	@import url("/static/css/course_list.css");

	.s-all-wrap {
		position: relative;
	}
	.index-banner-wrap2 {
		overflow: overlay;
		transform: translateY(0);
		margin-top: 10rpx;
		height: 240rpx;
		
		
	
	}
	.index-banner-wrap2 .index-banner-img2  {
	
		height: 90%;
		display: unset;
		
	
	}
	
	.m-slider {
	    overflow-x: hidden;
	    width: 100%;
	    position: relative;
	    border-radius: 10px;
	    margin: -5.5rem auto 0.5rem;
	}
	.jq22-navBar {
	    height: 70px;
	    position: relative;
	    display: -webkit-box;
	    display: -webkit-flex;
	    display: -ms-flexbox;
	    display: flex;
	    z-index: 102;
	    background: -webkit-linear-gradient(left, #1FDCA9, #41dc9c); /* Safari 5.1 - 6.0 */
	    background: -o-linear-gradient(right, #1FDCA9, #41dc9c); /* Opera 11.1 - 12.0 */
	    background: -moz-linear-gradient(right, #1FDCA9, #41dc9c); /* Firefox 3.6 - 15 */
	    background: linear-gradient(to right, #1FDCA9, #41dc9c); /* 标准的语法 */
	    background-color: #1FDCA9;
		margin-left: -12px;
		width: 109%;
	}
	.jq22-navBar-item {
	    height: 44px;
	    min-width: 15%;
		margin-top: 22px;
	    -webkit-box-flex: 0;
	    -webkit-flex: 0 0 15%;
	    -ms-flex: 0 0 15%;
	    flex: 0 0 15%;
	    padding: 0 0.9rem;
	    display: -webkit-box;
	    display: -webkit-flex;
	    display: -ms-flexbox;
	    display: flex;
	    -webkit-box-align: center;
	    -webkit-align-items: center;
	    -ms-flex-align: center;
	    align-items: center;
	    font-size: 0.7rem;
	    white-space: nowrap;
	    overflow: hidden;
	    color: #ffffff;
	    position: relative;
	}
	.jq22-navBar-item:first-child {
	    -webkit-box-ordinal-group: 2;
	    -webkit-order: 1;
	    -ms-flex-order: 1;
	    order: 1;
	    margin-right: -25%;
	    font-size: 0.9rem;
	    font-weight: bold;
	}
	.jq22-navBar-item:last-child {
	    -webkit-box-ordinal-group: 4;
	    -webkit-order: 3;
	    -ms-flex-order: 3;
	    order: 3;
	    -webkit-box-pack: end;
	    -webkit-justify-content: flex-end;
	    -ms-flex-pack: end;
	    justify-content: flex-end;
	}
	.jq22-center {
	    -webkit-box-ordinal-group: 3;
	    -webkit-order: 2;
	    -ms-flex-order: 2;
	    order: 2;
	    display: -webkit-box;
	    display: -webkit-flex;
	    display: -ms-flexbox;
	    display: flex;
	    -webkit-box-pack: center;
	    -webkit-justify-content: center;
	    -ms-flex-pack: center;
	    justify-content: center;
	    -webkit-box-align: center;
	    -webkit-align-items: center;
	    -ms-flex-align: center;
	    align-items: center;
	    height: 44px;
	    width: 100%;
		margin-top: 22px;
	    margin-left: 25%;
	}
	.jq22-center-title {
	    text-align: center;
	    width: 100%;
	    white-space: nowrap;
	    overflow: hidden;
	    display: block;
	    text-overflow: ellipsis;
	    font-size: 0.95rem;
	    color: #333;
	}
	.icon {
	    width: 20px;
	    height: 20px;
	    display: block;
	    border: none;
	    float: left;
	    background-size: 20px;
	    background-repeat: no-repeat;
	}
	.icon-return {
	    background-image: url('');
	}
	.icon-news {
	    background-image: url('');
	}
	
	.jq22-search-box {
	    background: #f4f7fe;
	    border-radius: 20px;
	    position: relative;
	    width: 100%;
	    height: 31px;
		margin-right: 15px;
	}
	.jq22-search-box .search {
	    width: 100%;
	    background: none;
	    border: none;
	    font-size: 0.85rem;
	    text-align: left;
	    height: 20px;
	    border-radius: 22px;
	    padding: 0.55rem 0 0.55rem 1.8rem;
		margin-top: -5px;
		color: #b1b1b1;
	
	}
	.icon-search {
	    position: absolute;
	    background-image: url('');
	    left: 8px;
	    top: 0.35rem;
	    background-size: 19px;
		
	}
	.jq22-five-box {
		
	    background: -webkit-linear-gradient(left, #1FDCA9, #41dc9c); /* Safari 5.1 - 6.0 */
	    background: -o-linear-gradient(right, #1FDCA9, #41dc9c); /* Opera 11.1 - 12.0 */
	    background: -moz-linear-gradient(right, #1FDCA9, #41dc9c); /* Firefox 3.6 - 15 */
	    background: linear-gradient(to right, #1FDCA9, #41dc9c); /* 标准的语法 */
	    background-color: #1FDCA9;
	    width: 109%;
		margin-left: -12px;
	    height: 6rem;
	}

	.search-all-wrap {
		margin-top: 0rpx;
		width: 90%;
		height: 65rpx;
		line-height: 65rpx;
	}

	.search-wrap {
		width: 100%;
		height: 100%;
		line-height: 65rpx;
		border-radius: 30rpx;
		margin-left: 20rpx;
		ding-left: 20rpx;
		background-color: #F5F5F5;
		float: left;
	}

	.search-wrap text,
	.search-wrap input {
		float: left;
		background-color: #F5F5F5;
		height: 100%;
		padding: 0;
	}

	.search-wrap text {
		margin-right: 20rpx;
		color: #C7C7C7;
	}

	.search-wrap input {
		width: 70%;
	}

	.gouwunums {
		display: flex;
		flex-direction: row;

	}

	.gowucheimage {
		display: flex;
		width: 70upx;
		height: 50upx;
		display: flex;
		flex-direction: row;
		flex-flow: column;
	}

	.carnums {
		margin-left: -30upx;
		margin-top: -15upx;
		width: 40upx;
		height: 40upx;
		font-size: small;
		color: #FFFFFF;
		text-align: center;
		background-color: #FF3333;
		border-radius: 20upx;
	}

	/* 新闻资讯 */
	.news-wrap {
		width: 97%;
		height: 80rpx;
		margin: 120rpx auto 0;
		padding-left: 3%;
		line-height: 80rpx;
		border-radius: 34rpx;
		background-color: #F6F6F6;
		display: flex;
		align-items: center;
		
	}

	.news-wrap-title-img {
		float: left;
		width: 120rpx;
		height: 100%;
	}

	.news-shu {
		float: left;
		margin: 0 20rpx;
		color: #CCCCCC;
	}

	.news-title {
		float: left;
		width: 70%;
		color: #333333;
		font-size: 26rpx;
		display: inline-block;
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.news-arow {
		color: #CCCCCC;
		font-size: 28rpx;
		position: absolute !important;
		right: 45rpx !important;
	}


	.swiper-wrap {
		width: 68%;
		height: 70rpx;
		line-height: 70rpx;
	}

	.c-more-icon {
		position: relative;
		top: 5rpx;
	}

	.live-more {
		right: 29rpx !important;
	}

	.content-more {
		right: 29rpx !important;
		
	}

	.course-list-wrap .course-wrap {
		width: 100% !important;
		padding-bottom: 0 !important;
		
	}
	/* .course-list-wrap .course-wrap .price-wrap {
		width: 61px;
		background: #00ffde;
		border-radius: 15px;
		text-align: center;
	} */
	.course-list-wrap .course-wrap .price-wrap .free {
		width: 61px;
		background: #1FDCA9;
		border-radius: 15px;
		text-align: center;
	}
	.course-list-wrap .course-wrap .price-wrap .pass {
		width: 61px;
		background: #dc0000;
		border-radius: 15px;
		text-align: center;
	}

	.course-list-wrap {
		margin-bottom:  60rpx;
	}

	.price-wrap {
		padding-right: 16rpx !important;
	}
	/* 讲师和新闻按钮 */
	.news-teacher-wrap{
		display: flex;
		height: 133rpx;
	}
	.news-teacher-img1{
		height: 133rpx;
	}
	.news-teacher-img2{
		height: 133rpx;
	}
</style>
